<!-- Intro -->
<template>
  <div id="intro">
    <div class="content">
      <img class="select-none" :src="image" alt="" @click="introClick(data)">
      <div class="title select-none" @click="introClick(data)">
        {{title}}
      </div>
      <div class="tagBox" v-if="this.$u.type(tag) == 'Array'">
        <span class="tag select-none" v-for="(item, index) in tag" :key="index" @click="tagClick(item)"><i class="el-icon-price-tag"></i>{{item.name ? item.name : item}}</span>
      </div>
      <div class="tagBox" v-show="tag" v-else-if="this.$u.type(tag) == 'Object' || this.$u.type(tag) == 'String'">
        <span class="tag select-none" @click="tagClick(tag)"><i class="el-icon-price-tag"></i>{{tag.name ? tag.name : tag}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Intro',
  props: {
    image: {
      default: require('@a/img/default/default2.png'),
      type: String
    },
    createTime: {
      default: '',
      type: String
    },
    title: {
      default: 'null',
      type: String
    },
    data: {
      type: Object
    },
    tag: {
      default: '',
      type: [String, Object, Array]
    }
  },
  data() {
    return {

    }
  },
  computed: {
    random() {
      return 'https://picsum.photos/200/300?random=' + this.$u.random()
    },
    typeOfTag() {
      return typeof this.tag
    }
  },
  methods: {
    tagClick(item) {
      this.$emit('tagClick', item)
    },
    introClick(data) {
      this.$emit('introClick', data)
    }
  },
  created() {

  },
  mounted() {
  }
}
</script>
<style lang='scss' scoped>
@import '@a/scss/base.scss';
@import '@a/scss/pc/intro.scss';
</style>
